<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Collectibles
      <ng-container *ngIf="(gameService.collectibles$ | async) as collectibles">({{ collectibles?.length }})</ng-container>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.collectibles$ | async) as collectibles">
    <div class="blank-slate" *ngIf="!collectibles?.length">
      You have no collectibles.
    </div>

    <ion-row class="ion-flex-wrap">
      <ion-col size-xs="12" size-md="6" *ngFor="let coll of collectibles">
        <ion-card [color]="coll.rarity" [class.notfound-collectible]="coll.foundAt === 0">
          <ion-card-header>
            <ion-card-subtitle *ngIf="coll.foundAt === 0">
              Not Found This Ascension
            </ion-card-subtitle>
            <ion-card-subtitle *ngIf="coll.foundAt > 0">
              Found {{ coll.foundAt | date:'medium' }}
            </ion-card-subtitle>
            <ion-card-title>{{ coll.name }}</ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-row class="coll-row">
              <ion-col>
                {{ coll.description }}
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col class="coll-desc">
                Touched {{ coll.touched }} times
              </ion-col>
              <ion-col class="ion-text-right coll-desc">
                {{ coll.storyline }}
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ng-container>
</ion-content>
